<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自律小组</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/iview@2.12.0/dist/styles/iview.css"> -->

    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.12.0/dist/iview.min.js"></script>

    <style type="text/css">
        body {
            background-color: #0c2a52;
        }
        .zc-container {
            text-align: center;
        }
        .zc-title {

        }
        .col-left {
            text-align: left;
        }
        .col-center {
            text-align: center;
        }

        .zc-zb-box {
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            padding: 30px 5px 30px 5px;
        }
        .zc-zb-name {
            font-size: 15px;
            color: #dcdcdc;
            line-height: 16px;
        }
        .zc-zb-num {
            font-size: 37px;
            color: #fff;
            line-height: 48px;
            margin-left: 20px;
        }
        .zc-zb-pc {
            font-size: 25px;
            color: green;
            line-height: 35px;
            margin-left: 15px;
        }
        .zc-zb-change {
            margin-left: 10px;
        }
        .zc-map {
        }
        .right-zb-box{

        }

        @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
            .masked{
                background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 4s infinite linear;
            }
        }
        @-webkit-keyframes masked-animation {
            0%  { background-position: 0 0;}
            100% { background-position: -100% 0;}
        }

        .zb-box {
            position: relative;
            height: 120px;
            width: 260px;
            left: 50%;
            transform: translate(-50%,0%);
        }
        .zb-jj {
            width: 0px;
            height: 0px;
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 18px solid #2769c1;
            position: absolute;
            top: 20px;
            left: 240px;
        }
        .zb-nr {
            position: absolute;
            top:20px;
            left: 0px;
            width: 240px;
            height: 60px;
            background-color: #2769c1;
            padding-left: 100px;
            text-align: left;
        }
        .zb-title {
            margin-top: 5px;
            color: #fff;
        }
        .zb-num {
            color: red;
            font-size: 26px;
        }
        .zb-image-b {
            width: 80px;
            height: 60px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #0d1365;
        }
        .zb-image {
            width: 36px;
            height: 36px;
            margin-top: 12px;
        }
    </style>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .dh-container {
            position: relative;
            width: 40px;
            height: 40px;
            left: 10px;
            top: 10px;
        }
        /* 保持大小不变的小圆点 */
        .dot {
            position: absolute;
            width: 15px;
            height: 15px;
            left: 13px;
            top: 12px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 1px solid #33ccff;
            border-radius: 50%;
            background-color:#33ccff; /* 实心圆 ，如果没有这个就是一个小圆圈 */
            z-index: 2;
        }
        /* 产生动画（向外扩散变大）的圆圈 第一个圆 */
        .pulse {
            position: absolute;
            width: 40px;
            height: 40px;
            left: 0px;
            top: 0px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
        }
        /* 产生动画（向外扩散变大）的圆圈 第二个圆 */
        .pulse1 {
            position: absolute;
            width: 40px;
            height: 40px;
            left: 0px;
            top: 0px;
            border: 1px solid #3399ff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
        }
    </style>
</head>
<body>
<div class="container-fluid zc-container">
    <div class="row">
        <div class="col-sm-12 zc-title">
            <h1 style="color: #e2e2e2;">自律小组专栏<small>小组成员信息</small></h1>
        </div>
    </div>
    <hr style="border-top: 1px solid #ccc;">
    <div class="row">
        <div class="col-sm-3 con-left" id="app">

            <div class="zc-zb-box">
                <select class="form-control" v-model="selectMonopoly" style="color: #fff;background-color: #0c2a52">
                    <option v-for="monopoly in monopolys" :value="monopoly.GROUP_ID">{{monopoly.GROUP_NAME}}</option>
                </select>
            </div>

        </div>
        <div class="col-sm-6 col-center">
            <div class="zc-map" id="zc-map"></div>

        </div>
        <div class="col-sm-3">
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main1"></div>
            </div>
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main2"></div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
<script>

    // 高度设置
    $('#zc-map').height($('#zc-map').width()*1);
    {
        var total = $(document).height();
        $('.main').height(total*0.36);
    }


    //初始化地图
    var map = new AMap.Map('zc-map',{
        resizeEnable: true,
        zoom: 12,
        mapStyle: 'amap://styles/grey',
        center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
    });
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
        toolBar = new AMap.ToolBar();  //工具条
        scale = new AMap.Scale();    //比例尺
        map.addControl(toolBar);
        map.addControl(scale);
    });
    var infoWindow = new AMap.InfoWindow();

    //初始化统计图
    var myChart1 =  echarts.init($("#main1")[0]);
    var myChart2 =  echarts.init($("#main2")[0]);

    //vue实例
    new Vue({
        el: '#app',
        data: {
            markerList : [],
            monopolys:[],
            selectMonopoly: '52403121487873',

            gongYe:[{name:'a',child:[{name:'aa',code:'aa'}]},
                {name:'b',child:[{name:'bb',code:'bb'}]}],
            product:[],
            selectKey: '',
            selectValue: '',
            numData:{
                consumerTotal: 0,
                manTotal : 0,
                womanTotal : 0,
                age1Total : 0,
                age2Total : 0,
                age3Total : 0
            }
        },
        computed: {

        },
        watch: {
            'selectMonopoly': function(newValue) {
                this.updateNumData();
                this.getData();
            },
        },
        mounted: function () {
            this.getGroupInfo();
            this.getData();
        },
        methods: {
            getInitData : function () {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getIndustryInitData',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            var gys = data.data.gys;
                            vm.gongYe = gys;
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
            },
            getData: function () {
                var vm = this;
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/getGroupMemberSaleData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        "group_id":this.selectMonopoly,
                        "year":"2018"
                    },
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {
                            var sale = data.data;
                            vm.updateMain1Data(sale.saleData);
                            vm.updateMain2Data(sale.totalData);

                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("网络错误")
                    }
                })
            },
            getGroupInfo:function(data){
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getGroupInfoData',
                    type: 'post',
                    dataType: 'json',
                    data: {

                    },
                    success: function (data) {
                        console.log(data);
                        if (data.success) {
                            var monopolys = data.data;
                            var carLocation = data.data.carLastLocation;
                            var yearData = data.data.yearData;
                            vm.updateNumData();
                            vm.monopolys = monopolys;

                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
            },
            updateNumData : function (data) {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getGroupMemberInfoData',
                    type: 'post',
                    dataType: 'json',
                    ansyc:false,
                    data: {
                        "groupId":this.selectMonopoly
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.success) {
                            vm.updateMap(data.data);  //生成环境注释或删除
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
               /* this.numData.customer = data.shouldOrderUsers ? data.shouldOrderUsers : '0';
                this.numData.quantity = data.biaoGan ? data.biaoGan : '0';
                this.numData.largeCustomer = data.xianDai ? data.xianDai : '0';
                this.numData.mediumCustomer = data.xinXi ? data.xinXi : '0';
                this.numData.smallCustomer = data.shiJian ? data.shiJian : '0';*/

              /*  $('#orderGoods').html(data.alreadyOrderUsers ? data.alreadyOrderUsers: '0');
                $('#sell').html(data.alreadyKnotUsers ? data.alreadyKnotUsers: '0');
                $('#delivery').html(data.alreadyOrderUsers  -  data.alreadyKnotUsers);
*/

            },
            updateMap : function (dataArray) {

                map.remove(this.markerList);
                map.clearInfoWindow();
                this.markerList = [];

                if (!dataArray || dataArray.length ==0) {
                    return;
                }

                map.setCenter(new AMap.LngLat(dataArray[0].LONGITUDE,dataArray[0].LATITUDE));
                var markerList=[];
                for (var index in dataArray) {
                    var markeInfo = dataArray[index];


                    var div1 = document.createElement('div');
                    div1.classList.add('dh-container');

                    var div2 = document.createElement('div');
                    div2.classList.add('dot');

                    var div3 = document.createElement('div');
                    div3.classList.add('pulse');

                    var div4 = document.createElement('div');
                    div4.classList.add('pulse1');


                    switch (markeInfo.IS_EXP + '') {
                        case '1' :
                            div2.style.border = '1px solid #33ccff';
                            div2.style.backgroundColor = '#33ccff';
                            div3.style.border = '1px solid #3399ff';
                            div3.style.boxShadow = '1px 1px 30px #3399ff';
                            div4.style.border = '1px solid #3399ff';
                            div4.style.boxShadow = '1px 1px 30px #3399ff';
                            break;
                        case '0' :
                            div2.style.border = '1px solid #ff0000';
                            div2.style.backgroundColor = '#ff0000';
                            div3.style.border = '1px solid #ff0000';
                            div3.style.boxShadow = '1px 1px 30px #ff0000';
                            div4.style.border = '1px solid #red';
                            div4.style.boxShadow = '1px 1px 30px #ff0000';
                            break;
                        default :
                    }

                    div1.appendChild(div2);
                    div1.appendChild(div3);
                    div1.appendChild(div4);




                    var marker = new AMap.Marker({
                        content: div1,
                        //icon : icon,//24px*24px
                        position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                        title:markeInfo.PLATE_NUMBER,
                        offset : new AMap.Pixel(-24,-24),
                        // animation:'AMAP_ANIMATION_BOUNCE',
                        map : map
                    });



                    marker.content = '客户名称：'+ (markeInfo.USER_NAME ? markeInfo.USER_NAME : '')  +
/*
                        '<br>客户号：'+ markeInfo.CUST_CODE +
*/
                        '<br>店铺名称：'+ markeInfo.SHOP_NAME+
                        '<br>店铺Id：'+ markeInfo.SHOP_ID +
                        '<br>是否试点：'+ (markeInfo.IS_EXP == '1' ? '是':'否') +
                        '<br>店铺地址：'+ (markeInfo.LOCATION_ADDRESS? markeInfo.LOCATION_ADDRESS : '')
                    ;

                    AMap.event.addListener(marker, 'click', function(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());


                    });


                    markerList.push(marker);

                }

                this.markerList = markerList;

            },
            updateMain1Data: function (mainData) {
                //虚拟数据
               /* mainData = [
                    {PRODUCT_NAME:'贵烟(福)',QUANTITY:19873},
                    {PRODUCT_NAME:'贵烟(硬黄精品)',QUANTITY:15873},
                    {PRODUCT_NAME:'贵烟(喜)',QUANTITY:13787},
                    {PRODUCT_NAME:'贵烟(软高遵)',QUANTITY:12873},
                    {PRODUCT_NAME:'贵烟(硬高遵)',QUANTITY:11873},
                    {PRODUCT_NAME:'贵烟(跨越)',QUANTITY:10873},
                    {PRODUCT_NAME:'贵烟(玉液2号)',QUANTITY:8873},
                    {PRODUCT_NAME:'贵烟好彩',QUANTITY:7873},
                    {PRODUCT_NAME:'贵烟(软多彩)',QUANTITY:6873},
                    {PRODUCT_NAME:'黄果树(长征1935)',QUANTITY:5873},
                ];*/

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var prods = [];
                var quantity = [];
                for (var index in mainData) {
                    var data = mainData[index];
                    prods.push(data.CUST_NAME);
                    quantity.push((data.TOTAL));
                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#f7a460'],
                    title: {
                        text: '销量前五',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['销量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        //bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            color: '#fff',
                            fontSize: 14
                        },
                        data: prods
                    },
                    yAxis: {
/*
                        name: "（箱）",
*/
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'销量',
                            type:'bar',
                            data:quantity
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option)
            },
            updateMain2Data: function (mainData) {
                if (!mainData) return;

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var months = ['1月份','2月份','3月份','4月份','5月份','6月份','7月份','8月份','9月份','10月份','11月份','12月份'];
                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in mainData) {
                    var data = mainData[index];
                    quantity18[index] = (data.sum).toFixed(2);

                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#6245f7', '#35b1d2'],
                    title: {
                        text: '年销量',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        },
                        data: months
                    },
                    yAxis: {
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [

                        {
                            name:'2018',
                            type:'line',
                            data:quantity18
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            },
            managerAmt: function () {
                var payAmt = this.numData.amt;
                if (!payAmt) {
                    return '0元';
                }
                if (payAmt > 100000000) {
                    return (payAmt / 100000000).toFixed(2) + "亿";
                }
                if (payAmt > 10000) {
                    return (payAmt / 10000).toFixed(2) + "万";
                }
                return payAmt
            }
        }
    });
</script>
</body>
</html>